<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=750, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>不需要搬运</title>
    <link rel="stylesheet" href="__PUBLIC__/css/weui.css?t=201410289903">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery-weui.min.css?t=201410289903">
    <link href="__PUBLIC__/css/style.css?t=201410289903" rel="stylesheet">
    <style>
      #searchResultPanel{
            width:100%; font-size:36px !important;
        }
       .tangram-suggestion table{width:100%;font-size:36px !important;margin-top: 10px !important;}
        .tangram-suggestion table tr td {
    overflow:scroll !important;
    height:45px !important;
    padding:0 15px !important;
    line-height:45px !important;
    }
    .tangram-suggestion .route-icon {
    overflow:scroll !important;
    padding-left:30px !important;
    font-style:normal;
    background:url("__PUBLIC__/img/search.png") no-repeat 0 5px !important;
    /*background:url(http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/tools/suggestion-icon_013979b.png) no-repeat 0 -24px !important;*/
    

    background-size:26px 26px !important;
    }
.car_desc {
    font-size: 30px;
}
.tangram-suggestion-prepend {
    padding:6px !important;
    font:36px verdana !important;
    color:#c0c0c0;
}
.tangram-suggestion-append {
    padding:6px !important;
    font:36px verdana !important;
    text-align:right;
    color:#c0c0c0;
}
#tangram-suggestion--TANGRAM__1d>div{
    height:40px !important;
}
#tangram-suggestion--TANGRAM__1d>div>span{
    font-size:26px !important;
}
#container {width:300px; height: 180px; } 
header{
    z-index: 9999;
   }
.auto-item {
    font-size: 30px;
    cursor: pointer;
    padding: 4px;
}
    .amap-sug-result {
    position: fixed;
    z-index: 0;
    background-color: #fefefe;
    border: 0px;
}
    </style>
</head>

<body>
    <div class="layout fixed" id="page-home">
        <header>
            <a href="#" class="header-address">青岛</a>
            <h1>挪窝儿</h1>
        </header>
        <form class="am-form" name="form1" action="__CONTROLLER__/order"  ONSUBMIT="return check();">
        <div class="address-bd" id="chufa">
            <div class="address-input clearfix">
                <div class="fl ico ico-address"></div>
                <input type="text" class="fl tm-input startAdd" id="startAdd" name="startAdd" style="color: #000000" placeholder="输入出发地">
            </div>
             
            <!-- <div class="address-option">
            <div class="fl ico ico-address"></div>
                <input type="text" style="margin-top:23px;color: #000000;" class="fl tm-input endAdd"  id="endAdd" name="endAdd" placeholder="输入目的地">
            </div> -->
        </div>

        <div class="address-bd" id="mudi">
            <div class="address-input clearfix">
                <div class="fl ico ico-address"></div>
                <input type="text" class="fl tm-input endAdd"  id="endAdd" name="endAdd" style="color: #000000" placeholder="输入目的地">
            </div>
           
        </div>
        
        <div class="ban-list">
            <div class="ban-item">
                <div class="fl ico ico-time">
                </div>
                <input type="text" style="color: #000000;" id="select-time" name="appDate" placeholder="请选择日期和时间" />
            </div>
            
            <div class="ban-item on" id="select-cart">
                <div class="fl ico ico-cart">
                </div>
                <span class="option-cart"><input type="text" name="car" id="car" class="input-name" style="width:350px;" placeholder="请选择合适您的车型" readonly value=""></span>
                <a href="javascript:;;" class="gg" id="change_cart">更改</a>
            </div>
            
            <div class="ban-item">
                <div class="fl ico ico-tel">
                </div>
                <input type="tel" name="mphone" class="input-tel" placeholder="请填写您的手机号" >
            </div>
            
            <div class="ban-item">
                <div class="fl ico ico-name">
                </div>
                <input type="text" name="name" class="input-name" placeholder="怎么称呼 （姓名）">
            </div>
        </div>
        
        <div class="beizhu">
            <textarea name="beizhu" id="beizhu" cols="30" placeholder="用户备注"></textarea>
        </div>
        <div id="container"></div> 
        <div class="confirm-order" id="submit_order">
            <div class="order-info">
                <div class="price fl">
                    <span class="fh">￥</span>
                    <span class="jg" id="cost">0</span>
                </div>
                <div class="fr">
                    <div class="fr-item" style="margin-top:25px;">
                        <span>距 离：</span><font id="dst">0</font>公里
                    </div>
                </div>
            </div>
            
            <input type="hidden" name="getCity" value="青岛"  />
            <input type="hidden" name="cost" id="costInput" value="0"  />
            <input type="hidden" name="is_start" id="is_start" value=""  />
            <input type="hidden" name="is_end" id="is_end" value=""  />
            <input type="hidden" name="costFb" id="costFb" value="0"/>
            <input type="hidden" name="ben" id="ben" value=""/>
            <input type="hidden" name="distance" id="distance" value=""/>
            <button class="btn-confirm">确认订单</button>
        </div>
        <div id="jsbz" class="hide">
        	<div class="box">
        		<a href="javascript:close();" class="close"></a>
        		<img src="__PUBLIC__/img/raw_1468482878.png" width="600" alt="" style="max-width: 90%">
        	</div>
        </div>
        </form>
    </div>
    
    <div class="layout fixed2" id="page-select-car" style="display: none;">
        <header>
            <a href="javascript:back();" class="link-left">返回</a>
        </header>
        <div class="xl-list">
        	<div class="xl-item car1">
                <div class="pic">
                    <img src="/Public/images/1/01.png" alt="">  
                </div>
                <div class="bd">
                     <div class="car_desc">
                      <h3>面包车</h3>
                    空间尺寸：长2m/宽1.3m/高1.3m <br/>
可容纳15个左右行李箱/编织袋/纸箱<br/>
可容纳洗衣机（体积相当于3件左右行李）<br/>
起步5公里40元，超里程每公里4元<br/>

                    </div>
                </div>
            </div>
            <div class="xl-item car2">
                <div class="pic">
                    <img src="/Public/images/1/02.png" alt="">
                </div>
                <div class="bd">
                    <div class="car_desc">
                      <h3>小型平板货车</h3>
                    空间尺寸：长3m/宽1.7m/高1.8m<br/>
可容纳洗衣机/冰箱/床/床垫等所有常见行李<br/>
开放空间，不适用雨雪天气<br/>
起步5公里60元，超里程每公里5元<br/>
                    </div>
                </div>
            </div>
            <div class="xl-item car3">
                <div class="pic">
                    <img src="/Public/images/1/03.png" alt="">
                </div>
                <div class="bd">
                    <div class="car_desc">
                    <h3>中型平板货车</h3>
                    空间尺寸：长4m/宽1.8m/高1.8m<br/>
可容纳洗衣机/冰箱/床/床垫等所有常见行李<br/>
开放空间，不适用雨雪天气<br/>
起步5公里85元，超里程每公里5元<br/>
                    </div>
                </div>
            </div>
            <div class="xl-item car4">
                <div class="pic">
                    <img src="/Public/images/1/04.png" alt="">
                </div>
                <div class="bd">
                    <div class="car_desc">
                    <h3>中型厢式货车</h3>
                    空间尺寸：长4m/宽1.8m/高1.8m<br/>
可容纳洗衣机/冰箱/床/床垫等所有常见行李<br/>
封闭空间，不受天气影响<br/>
起步5公里120元，超里程每公里5元<br/>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    
    <div id="l-map"></div>
    <script src="__PUBLIC__/js/jquery.min.js?t=201410289903"></script>
    <script src="__PUBLIC__/js/jquery-weui.min.js?t=201410289903"></script>
<script src="__PUBLIC__/js/webapp1.js?t=201410289903"></script>
    
    <!-- 百度地图 -->
<!--     <script type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak=cRIblrzawnZeT319eL3dLssL"></script>
<script src="__PUBLIC__/js/map.js?t=201410289903"></script> -->
   <!-- 高德地图 -->
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=aab886d4a59efc2916aee2f60db1c886"></script>
    
    <script>
    var value1='';
    var value2='';
        AMap.plugin('AMap.Autocomplete',function(){
    //实例化Autocomplete
    var autoOptions = {
        city: "青岛市", 
        input:"startAdd"
    };
    autocomplete= new AMap.Autocomplete(autoOptions);


     AMap.event.addListener(autocomplete, "select", function(e){

        value1=[e.poi.location.lng,e.poi.location.lat];
        if (value2!='') {
        go_search(value1,value2);
    }
             
     });

     var autoOptions2 = {
        city: "青岛市", 
        input:"endAdd"
    };
    autocomplete2= new AMap.Autocomplete(autoOptions2);

    AMap.event.addListener(autocomplete2, "select", function(e){

        value2=[e.poi.location.lng,e.poi.location.lat];
          console.log(value2);  
          go_search(value1,value2)


     });


    //TODO: 使用autocomplete对象调用相关功能
})

        function go_search(v1,v2){

                AMap.service('AMap.Driving',function(){
    //实例化Driving
    driving= new AMap.Driving({city: '青岛市'});
    //TODO: 使用driving对象调用驾车路径规划相关的功能
     //根据起终点坐标规划驾车路线
   

    driving.search(v1, v2, function(status, result) {


        if(status === 'complete' && result.info === 'OK'){
            console.log(result.routes['0'].distance);
              var opt=result.routes['0'].distance;
              opt=opt/1000;
                $("#dst").html(opt);
                $("#distance").val(opt);
                chuanAjax();
        }else{
            // alert(result);
        }


        
 });



})

}
$("#startAdd").bind("blur",function(){
        var startAdd = $("#startAdd").val();
        //如果起始地点和目的地都填了值，那么就去调用
        if (startAdd!= "") {
            geocoder(startAdd);
        }
      
    });

$("#endAdd").bind("blur",function(){
        var startAdd = $("#startAdd").val();
        var endAdd = $("#endAdd").val();
        //如果起始地点和目的地都填了值，那么就去调用
        if (endAdd!= ""&&startAdd != "") {
            geocoder(startAdd);
            geocoder(endAdd);
        }
      
    });



		//传ajax
		function chuanAjax() {
			$.post("__CONTROLLER__/info", {

				sAdress : $("#startAdd").val(),
				eAdress : $("#endAdd").val(),
				car : $("#car").val(),
				dst : $('#dst').html(),
				
			}, function(data, status) {
				$("#cost").html(data);
				$("#costInput").val(data);
			});
		}

    //高德地图
     function geocoder(address) {
        AMap.plugin("AMap.Geocoder",function(){  
geocoder=new AMap.Geocoder({ 
city:"0532",
radius:1000 
}); 
//地理编码,返回地理编码结果
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                //geocoder_CallBack(result);
            }else{
                if (value1=='') {
                    alert('地址错误');
                return false;  
                }

              
            }
        });


});
    }

    function check(){
         var r1=document.form1.startAdd.value;
            var r2=document.form1.endAdd.value;
             var dst=$('#dst').html();
            
            if(document.form1.startAdd.value.replace(/(^\s*)|(\s*$)/g, "").length==0){
                  alert("请输入出发地!");
                  document.form1.startAdd.value="";
                  document.form1.startAdd.focus();
                  return false;
            }else{
                AMap.plugin("AMap.Geocoder",function(){  
geocoder=new AMap.Geocoder({ 
city:"0532",
radius:1000 
}); 
//地理编码,返回地理编码结果
        geocoder.getLocation(r1, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                //geocoder_CallBack(result);
            }else{

                if (value1=='') {
                   alert('出发地无法解析');
                return false;  
                }
               
            }
        });


});
            }
            
            if(document.form1.endAdd.value.replace(/(^\s*)|(\s*$)/g, "").length==0){
                  alert("请输入目的地!");
                  document.form1.endAdd.value="";
                  document.form1.endAdd.focus();
                  return false;
            }else{
                AMap.plugin("AMap.Geocoder",function(){  
geocoder=new AMap.Geocoder({ 
city:"0532",
radius:1000 
}); 
//地理编码,返回地理编码结果
        geocoder.getLocation(r2, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                //geocoder_CallBack(result);
            }else{
                if (value2=='') {
                  alert('目的地无法解析');
                   sessionStorage.setItem("demokey", "1");
                }
                
            }
        });


});        var dt = sessionStorage.getItem("demokey");
        if (dt) {
            alert('目的地无法解析');return false;
        }
                
            }

            if (dst==0) {
                alert('地址输入错误,请选择下拉推荐地址');
                return false;
            }
            
            if($("#select-time").val()==""){
                alert("请选择日期和时间!");
                $("#select-time").focus();
                return false;
            }else{
                var cur_time=new Date().getTime();
                var datetime=$("#select-time").val();
                var value = datetime.replace(/[^0-9]/ig,""); 
                var year=value.substr(0,4);
                var month=value.substring(4,6);
                if (value.length==15) {
                  var day='0'+value.substring(6,7);  
                }else{
                  var day=value.substring(6,8);   
                }
                var hour=value.substr(value.length-4).substring(0,2);
                var datetime= year+'-'+month+'-'+day+' '+hour+':00:00';
                var timestamp = Date.parse(new Date(datetime));
                if (cur_time>timestamp) {
                    alert('选择的时间不得早于当前时间');
                    return false;
                }
                
            }
            
            var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
            if (!reg.test(document.form1.mphone.value)) {
              document.form1.mphone.value="";
              document.form1.mphone.focus();
              alert("请填写您的手机！");
              return false;
            };
            
            if(document.form1.name.value.replace(/(^\s*)|(\s*$)/g, "").length==0){
                  alert("请填写您的姓名!");
                  document.form1.name.value="";
                  document.form1.name.focus();
                  return false;
            }
            
        }
           $(".input-tel").focus(function(){
              $("#submit_order").css("position","absolute");
           
});
  $(".input-tel").blur(function(){
              $("#submit_order").css("position","fixed");
           
});


	</script>
	
	
    
</body>

</html>
